<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { watch } from 'vue'
import useStore from '../store'
const { newsList, channel } = useStore()
const { getNewsList } = newsList
// 这个 active 就是频道 id
const { active } = storeToRefs(channel)
// 会根据初始的 -1 去发请求，这并不是我们期望，因为 -1 是我们随便指定的初始值，根本不是第 0 个频道 id
// getNewsList(active.value)

// 当这个 action getChannelList 调用完之后，给 store 中的 active 赋值之后，active 总会从初始的 -1 变成第 0 个频道的 id
// 所以咱可以监听 active 的变化，根据变化后的新值发请求

// watch 监听的是一个 ref 数据
watch(active, (newValue) => {
  // console.log(newValue)
  getNewsList(newValue)
})
</script>

<template>
  <div className="list">
    <div className="article_item">
      <h3 className="van-ellipsis">python数据预处理 ：数据标准化</h3>
      <div className="img_box">
        <img src="http://geek.itheima.net/resources/images/11.jpg" className="w100" alt="" />
      </div>
      <div className="info_box">
        <span>13552285417</span>
        <span>0评论</span>
        <span>2018-11-29T17:02:09</span>
      </div>
    </div>
  </div>
</template>

<style scoed lang="less"></style>
